<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: black;
    }
    div{
      width: 600px;
      height: 200px;
      line-height: 200px;
      font-size: 150px;
      font-weight: bold;
      border: 1px solid #000;
      margin: 200px auto;
      /*background-color: skyblue;*/
      /*color: red;*/
      background: linear-gradient(-45deg, transparent 100px, white 150px, white 180px, transparent 220px) no-repeat -450px 0;
      color: rgba(255,255,255,0.3);
      /*
         -webkit-background-clip
         可以将背景裁剪文字的形状
         这个是一个私有的属性,并不是所有的浏览器都可以识别

      */
      -webkit-background-clip: text;
      transition: all 5s;
    }

    div:hover{
      background-position: 450px 0;
    }
  </style>

</head>
<body>


<div>黑马学院</div>
</body>
</html>